<template>
  <el-dropdown @command="changeLanguage" class="language">
    <span class="el-dropdown-link flex">
      <img
        src="https://cdn.game.paac.com.cn/admin-resource/static/admin/img/flags/diqiu.svg"
        alt=""
        srcset=""
      />
    </span>
    <template #dropdown>
      <el-dropdown-menu class="language">
        <el-dropdown-item command="en" v-if="langList.length===0||langList.includes('en')">
          <img
            src="https://cdn.game.paac.com.cn/admin-resource/static/admin/img/flags/us.svg"
            alt=""
          />EN
        </el-dropdown-item>
        <el-dropdown-item command="zh" v-if="langList.length===0||langList.includes('cn')">
          <img
            src="https://cdn.game.paac.com.cn/admin-resource/static/admin/img/flags/cn.svg"
            alt=""
          />CN
        </el-dropdown-item>
        <el-dropdown-item command="sa" v-if="langList.length===0||langList.includes('sa')">
          <img
            src="https://cdn.game.paac.com.cn/admin-resource/static/admin/img/flags/sa.svg"
            alt=""
          />SA
        </el-dropdown-item>
        <el-dropdown-item command="id" v-if="langList.length===0||langList.includes('id')">
          <img
            src="../../assets//image//Monaco.svg"
            alt=""
          />ID
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang='ts' setup>
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "../../store/index";

const props = defineProps({
  langList: {
    type: Array,
    default:[]
  }
});

const userStore = useUserStore();

const router = useRouter()
const route = useRoute();

const { locale } = useI18n();

if (route.query.lang) {
  userStore.setLangData(route.query.lang as string);
}
if (userStore.lang === "cn") {
  locale.value = "zh";
} else if (userStore.lang === "en") {
  locale.value = "en";
} else if (userStore.lang === "sa") {
  locale.value = "sa";
} else if (userStore.lang === "id") {
  locale.value = "id"
}
/* const label = computed(() => { 
  if (locale.value === 'en') { 
    return '英文'
  }else if (locale.value === 'zh') { 
    return '中文'
  }
  return '阿拉伯语'
}) */
const changeLanguage = async (lang: string) => {
  if (lang === "zh") {
    userStore.setLangData("cn");
  } else {
    userStore.setLangData(lang);
  }
  locale.value = lang;
  const query = {...route.query}
  query.lang = userStore.lang
  await router.replace({ query })
  window.location.reload();
};
</script>

<style lang="scss" scoped>
/* 智能手机（普通手机和宽屏智能手机） */
@media only screen and (max-width: 768px) {
  .language {
    img {
      width: 30px !important;
      height: 25px !important;
    }
  }
}


.language {
  img {
    width: 40px;
    height: 30px;
    margin-right: 5px;
  }
  font-size: 14pt;
}
.flex {
  display: flex;
  align-items: center;
  font-size: 16pt;
  i {
    margin-right: 3px;
  }
}
</style>
